/* eslint-disable @typescript-eslint/no-unused-vars */
import { DatePicker } from "antd"
import { RangePickerProps } from "antd/es/date-picker"
import dayjs, { Dayjs } from "dayjs"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"
// import { IUpdateTimeRangeProps } from "./types"

const { RangePicker } = DatePicker

const disabledDate: RangePickerProps["disabledDate"] = current => {
	// Can not select days after today
	return current > dayjs().endOf("day")
}

const LoginTime: FC<any> = ({ setFieldValue, ...rest }) => {
	const { formatMessage } = useLocale()

	const handleChange = (dates: Dayjs[]) => {
		if (dates) {
			const [start, end] = dates
			setFieldValue("loginAtBegin", start.startOf("day").format("YYYY-MM-DD HH:mm:ss"))
			setFieldValue("loginAtEnd", end.endOf("day").format("YYYY-MM-DD HH:mm:ss"))
		} else {
			setFieldValue("loginAtBegin", null)
			setFieldValue("loginAtEnd", null)
		}
	}

	return (
		<>
			<SFormItem name="loginAt" label={`${formatMessage({ id: "label.login_time" })}:`}>
				<RangePicker disabledDate={disabledDate} {...rest} onChange={handleChange} />
			</SFormItem>
			<SFormItem name="loginAtBegin" />
			<SFormItem name="loginAtEnd" />
		</>
	)
}

export default LoginTime
